<template>
	<view class="tui-centers">
		<uni-nav-bar fixed left-icon="back" :title="title" @clickLeft="clickLeft()"></uni-nav-bar>
		<!--<view class="tui-ticket-search">
				<view class="tui-flex">
					<view class="tui-ticket-tag"
						v-for="(item, index) in list" :key="index"
						:style="tagIndex == index ? 'border-color:#11A5EB' : 'border-color:#eee'"
						@tap="checknavTo(item, index)">
						<text>{{item.name}}</text>
						<view class="tui-tag-checkmark" v-if="tagIndex == index">
							<uni-icons type="checkmarkempty" size="12" color="#fff"></uni-icons>
						</view>
					</view>
				</view>
		</view>-->
		<glance-product :data="list" @clickitem="clickitem" underlinecolor="#6CB041"></glance-product>

		<view class="tui-ticket-box">
			<view v-for="(tagItem, tagIdx) in list" :key="tagIdx" v-if="tagIndex == tagIdx">
				<scroll-view class="list-scroll-content" scroll-y @scrolltolower="loadMore">
					<view class="tui-ticket-flex"  v-for="(liItem, tagIdx) in tagItem.children" :key="tagIdx"
					      @tap="detailTo(liItem)">
						<view class="tui-ticket-box-image">
							<image class="tui-ticket-img" :src="liItem.url" mode=""></image>
						</view>
						<view class="tui-ticket-center">
							<view class="tui-flex">
								<view class="tui-ticket-classification" v-if="liItem.keywords">{{liItem.keywords}}</view>
								<view class="tui-ticket-title">{{liItem.title}}</view>
							</view>

							<view class="tui-centerrecommend-center">{{liItem.description}}</view>
							<view class="tui-flexs" v-for="(skItem,index) in liItem.skuStockList" key="index" v-if="index == 0">
								<view class="tui-flexs-purchased">
									<text style="color: #999">￥</text>
									<text class="tui-flexs-pric">
										{{skItem.discoutPrice ? skItem.discoutPrice : skItem.price}}
									</text>
								</view>
								<view class="disc" v-if="skItem.discoutPrice">
									<del>￥{{skItem.price}}</del>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
				<empty v-if="tagItem.children.length == 0"/>
				<tui-nomore v-if="tagItem.children.length" text="已经到最底了" backgroundColor="#f7f7f7"></tui-nomore>
			</view>
		</view>

		<!-- 登录提示 -->
		<uni-login-model></uni-login-model>
		
	</view>
</template>

<script>
    import tuiNomore from '@/components/tui-nomore/tui-nomore.vue'
	import uniTag from '@/components/uni-tag/uni-tag.vue'
	import uniIcons from '@/components/uni-icons/uni-icons.vue'
    import uniLoginModel from '@/components/uni-login-model/uni-login-model.vue'
	import empty from '@/components/empty/index.vue'
    import glanceProduct from '@/components/list-cell/glance-product.vue'
	
	export default {
		name: 'ticket',
		components: {
			uniTag, uniIcons, uniLoginModel, empty, tuiNomore, glanceProduct
		},
		data() {
			return {
				checkTag: false,
				tagIndex: 0,
				list: [],
                categoryId: '',
                title: '',
                listQuery: {
				    pageNum: 1,
					pageSize: 10
				},
                lastPage: 1
            }
		},
		onLoad(options) {
			// this.list = JSON.parse(options.id)
            this.title = options.name
			this.categoryId = options.id
			this.getList()
		},
		methods: {
			getList() {
                uni.showLoading()
                uni.request({
                    // url: `category/good/${this.categoryId}`,
                    url: `category/get/${this.categoryId}`,
                    method: 'GET',
                    header: {'content-type': 'application/json', 'Authorization': 'Bearer ' + uni.getStorageSync('token')},
                    success: (res) => {
                        this.list = res.data.data
                        uni.hideLoading();
                    },
                    fail: (res) => {
                        uni.hideLoading();
                        uni.showToast({ title: res.data.message, icon:'none' })
                    }
                })
			},
			search(e, val) {
				uni.showToast({title:'功能尚未完善', icon:'none'})
				this['val'+ val] = e;
			},
			checknavTo(item, index) {
				this.tagIndex = index
			},
            clickitem(index, item) {
                this.tagIndex = index
			},
			detailTo(item) {
				if (this.title == '表演') {
                    uni.navigateTo({
                        // url: `/pagesA/ticket/components/ticketDetail?index=0&list=${JSON.stringify(item.children)}`
                        url: ''
                    })
				} else {
                    uni.navigateTo({
                        url: `/pagesA/ticket/components/ticketDetail?id=${item.spuId}`
                        // url: ''
                    })
				}
			},
            //	加载更多
            loadMore() {
                if (this.listQuery.pageNum < this.lastPage) {
                    this.listQuery.pageNum += 1
                    // this.loadData()
                }
            },
            clickLeft() {
                uni.navigateBack()
            }
		}
	}
</script>

<style lang="scss">
	.tui-centers {
		padding-bottom: 100rpx;
		font-size: 28rpx;
		line-height: 1.8;
		// height: 100%;
	}
	.tui-ticket-search {
		padding: 15rpx 15rpx 30rpx;
		background-color: #fff;
		.tui-ticket-tag {
			position: relative;
			height: 60rpx;
			line-height: 60rpx;
			border-radius: 6rpx;
			border-width: 1rpx;
			border-style: solid;
			padding: 0px 32rpx;
			margin-left: 15rpx;
			margin-top: 15rpx;
			border-color: #6CB041 !important;
			.tui-tag-checkmark {
				position: absolute;
				bottom: 0;
				right: 0;
				width: 0;
				height: 0;
				border-bottom: 30rpx solid #6CB041;
				border-left: 36rpx solid transparent;
				.uni-icons {
					position: absolute;
					top: -6rpx;
					right: 0;
				}
			}
		}
	}
	
	.tui-ticket-box {
		/*background-color: #fff;*/
		/*margin: 30rpx 0;*/
		.tui-ticket-flex {
			display: flex;
			padding: 20rpx;
			background: #fff;
			margin: 20rpx;
			border-radius: 20rpx;
			/*border-bottom: 2rpx solid #eee;*/
			.tui-ticket-box-image {
				width: 260rpx;
				height: 220rpx;
				padding-right: 20rpx;
				.tui-ticket-img {
					width: 100%;
					border-radius: 15rpx;
					height: 100%;
				}
			}
			.tui-ticket-center {
				flex: 1;
				.tui-ticket-title {
					font-size: 38rpx;
				}
				.tui-ticket-classification {
					color: #fff;
					background: #FD4B51;
					padding: 0 12rpx 4rpx;
					border-radius: 8rpx;
					margin-right: 15rpx;
				}
				.tui-centerrecommend-center {
					color: #666666;
					overflow: hidden;
					word-break: break-all;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 1;
				}
				.tui-flexs{
					display: flex;
					/*justify-content: space-between;*/
					align-items: center;
					.tui-flexs-pric{
						font-size: 34rpx;
						color: #FF6E6E;
					}
					.disc {
						padding-left: 15rpx;
						color: #999;
					}
				}
			}
		}
		
	}
</style>
